<template>
  <div>
    <a class="gb-display-block" @click="showModal">{{ text }}</a>
    <a-modal
      title="上传分析文件"
      centered
      :maskClosable="false"
      :width="800"
      v-model="visible"
      :okText="$t('modal_submit')"
      :cancelText="$t('modal_cancel')"
      @ok="handleOk"
      :okButtonProps="okButtonProps"
    >
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false" label="文件" >
          <AnalysisUploadFileUpload
            v-decorator="[
              'fileList',
              { initialValue:[], rules: [ {required: true, type: 'array', message: $t('please_input') + '文件' + $t('exclamation_mark')} ] }
            ]"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  components: {},
  props: {
    text: { type: [String] },
    callback: { type: [Function] },
    row: { type: [Object], default: () => { return {} } },
  },
  data() {
    return {
      form: this.$form.createForm(this, {name: 'analysisUploadFile' + this.row.id}),
      visible: false,
      okButtonProps: {},
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
    }
  },
  methods: {
    showModal() {
      this.form.resetFields();
      this.visible = true
      this.okButtonProps = {}
    },
    handleOk() {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }

        let formData = new FormData()
        formData.set("analysisId",this.row.id)
        let files = formValue.fileList || []
        files.forEach(item => {
          formData.append(item.uid, item.file)
        })

        this.okButtonProps ={ props: {disabled: true} }
        // submit
        axios({
          method: 'post',
          url: '/backend/analysis/upload',
          header: {'Content-Type': 'multipart/form-data'},
          data: formData,
        }).then(() => {
          this.visible = false
          if(this.callback) {
            this.callback();
          }
          this.$success({
            title: this.$t('success_message'),
            content: this.$t('submit_success'),
            okText: this.$t('modal_ok'),
          });
        }).catch(() => {
          this.okButtonProps = {}
        });
      });
    },
  }
}
</script>
